<template>
  <header class="home_header">
    <div class="top">
      <p>啾咕联盟</p>
    </div>
    <nav class="bottom" ref="navRef" :class="{'is_fiexed': isFixed}">
      <span class="logoImg">
        <img src="../assets/title.png" alt />
      </span>
      <ul class="nav">
        <li><router-link tag="a" to="/home">首页</router-link></li>
      </ul>
      <div class="status">
        <router-link tag="a" to="/home/add">发帖</router-link>
        <router-link tag="a" to="/usercenter/msg">
          消息
          <el-badge :is-dot="isRead" class="item"></el-badge>
        </router-link>
        <div class="user">
          <el-popover placement="bottom" v-model="visible" style="text-align:center;">
            <li @click="userCenter()">个人中心</li>
            <div style="margin:5px 0;"></div>
            <li @click="exit()">退出</li>
            <el-avatar size="large" :src="imgUrl" slot="reference"></el-avatar>
          </el-popover>
        </div>
      </div>
    </nav>
  </header>
</template>
<script>
export default {
  data() {
    return {
      username: '',
      imgUrl: '/x2.jpg',
      isFixed: '',
      offsetTop: 0,
      visible: false,
      isRead: false
    }
  },
  methods: {
    // 吸顶效果
    initHeight() {
      // 获取被卷曲的高度
      var scrollTop =
        window.pageYOffset ||
        document.documentElement.scrollTop ||
        document.body.scrollTop
      // 如果被卷曲的高度大于吸顶元素到顶端位置 的距离
      this.isFixed = scrollTop > this.offsetTop ? true : false
    },
    // 个人中心
    userCenter() {
      this.$router.push('/usercenter')
    },
    // 退出
    exit() {
      window.sessionStorage.clear()
      this.$router.push('/')
    }
  },
  created() {
    // 不用this.route传值的方式
    // this.username = this.$route.params.username
    this.username = window.sessionStorage.getItem('login')
    this.$emit('setUser', this.username)
    // 获取头像
    this.comm.getuserImg(this.username, this).then(data => {
      this.imgUrl = data
    })
    // 获取是否有新消息
    this.comm.getnotice(this.username, this).then(notice => {
      if (!notice.msgisread) {
        this.isRead = true
        console.log(this.isRead)
      }
      // 传出isRead
      this.$emit('isRead', this.isRead)
    })
  },
  mounted() {
    window.addEventListener('scroll', this.initHeight)
    this.$nextTick(() => {
      // 获取计算顶端位置
      this.offsetTop = this.$refs.navRef.offsetTop
    })
    // console.log('header' + this.centermsg)
  },
  destroyed() {
    window.removeEventListener('scroll', this.handleScroll)
  }
}
</script>
<style lang="less" scoped>
.home_header {
  width: 100%;
  height: 100px;
  .top {
    width: 100%;
    height: 35px;
    line-height: 35px;
    background-color: #35405e;
    color: #fff;
    p {
      margin: 0 3%;
    }
  }
  .bottom {
    display: flex;
    align-items: center;
    width: 100%;
    height: 65px;
    margin: 0 auto;
    border-bottom: 1px solid #dee1e9;
    .nav {
      display: flex;
      list-style: none;
      li {
        width: 80px;
        font-size: 14px;
        text-align: center;
        line-height: 30px;
        color: #565b69;
        a:hover{
          color: #0072eb;
        }
      }
    }
    .logoImg {
      display: inline-block;
      margin-left: 4%;
      width: 210px;
      height: 30px;
      img {
        width: 100%;
        height: 100%;
      }
    }
    .status {
      display: flex;
      width: 200px;
      line-height: 65px;
      margin-left: auto;
      margin-right: 40px;
      a {
        font-size: 15px;
        color: #565b69;
        margin-left: 30px;
      }
      .user {
        width: 40px;
        height: 40px;
        margin-top: 10px;
        margin-left: auto;
        border-radius: 50%;
      }
    }
  }
}
.is_fiexed {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  margin: auto;
  z-index: 999;
  background-color: #fafafc;
}
</style>
